<template>
  <div>
    <el-card class="custom-card">
      <div slot="header" class="header">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="0">销售额</el-menu-item>
          <el-menu-item index="1">访问量</el-menu-item>
          <div class="radio">
            <el-radio-group v-model="radio1">
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="本周"></el-radio-button>
              <el-radio-button label="本月"></el-radio-button>
              <el-radio-button label="今年"></el-radio-button>
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                class="date"
              >
              </el-date-picker>
            </el-radio-group>
          </div>
        </el-menu>

        <!-- <div>111</div> -->
      </div>
      <div class="body">
        <div class="echarts">
          <v-chart :option="option" />
        </div>
        <ul class="lists">
          <h3 class="title">排行榜</h3>
          <li v-for="item in arr1[index]" :key="item.no">
            <span :class="{ topThree: item.no <= 3 }">{{ item.no }}</span>
            <span>{{ item.title }}</span>
            <span>{{ item.sales }}</span>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      activeIndex: "0",
      radio1: "今日",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      option: {},
      arr: [],
      index: 0,
      arr1: [],
      arr2: [],
    };
  },
  methods: {
    handleSelect(key) {
      //   console.log(key, keyPath);
      this.index = key;
    },
    async getData() {
      const res = await fetch("http://39.103.151.139:3001/apis/saledata");
      this.data = await res.json();
      this.option = {
        title: {
          text: "年度销售额",
          textStyle: {
            fontSize: 15,
          },
        },
        xAxis: {
          type: "category",
          data: this.data.visitFullYeadAxis,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
        },
        series: {
          type: "bar",
          data: this.data.saleFulleYear,
          barWidth: 30,
          itemStyle: {
            color: "skyblue",
          },
        },
        width: 910,
        grid: {
          left: 40,
        },
      };
      this.arr = [this.data.saleFulleYear, this.data.visitFullYear];
      this.arr1 = [this.data.saleRank, this.data.visitRank];
    },
    fn() {
      this.option.series.data = this.arr[this.index];
    },
  },
  watch: {
    index: "fn",
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
  padding: 0;
}
.header {
  padding-left: 50px;
}
.radio {
  position: absolute;
  right: 0;
  top: 10px;
  right: 2%;
  padding: 0;
  .date {
    margin-left: 20px;
  }
}

.body {
  display: flex;
  .echarts {
    flex: 0 0 70%;
    height: 434px;
  }
  .lists {
    flex: 1;
    .title {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 600;
    }
    li {
      margin: 20px 0;
      display: flex;
      gap: 20px;

      span {
        font-size: 14px !important;
        color: #464545;
      }
      :first-child {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        text-align: center;
        line-height: 20px;
      }
      :nth-child(2) {
        flex: 1;
      }
      .topThree {
        background-color: #09b3f7;
        color: #fff;
      }
    }
  }
}
</style>
